<template>
  <div>
    <div
      v-if='showPan' @click="showPan = false"
      style="width:150px;height:150px; right: 0;"
      class="broad-side QIHOO__INTERACTIVE_PLUGIN1545061743283-thumbnail __web-inspector-hide-shortcut__ QIHOO__INTERACTIVE_PLUGIN1545061743283">
    </div>
    <div
      v-if='showPan' @click="showPan = false"
      style="width:150px;height:150px; left: 0;"
      class="broad-side QIHOO__INTERACTIVE_PLUGIN1545061743283-thumbnail __web-inspector-hide-shortcut__ QIHOO__INTERACTIVE_PLUGIN1545061743283">
    </div>
    <div v-if='!showPan' class="pan">
      <pan @handleClose="handleClose" :show-pan="!showPan"></pan>
    </div>
  </div>
</template>

<script>
import Pan from '../../components/Pan/index'
export default {
  name: 'BroadSide',
  components: {
    Pan
  },
  props: {
    isBool: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showPan: true
    }
  },
  methods: {
    handleClose () {
      this.showPan = true
      this.$emit('handleClose')
    }
  },
  watch: {
    isBool (val) {
      this.showPan = val
    }
  }
}
</script>

<style scoped lang="scss">
  .broad-side {
    position: fixed;
    bottom: 40%;
  }
  .pan {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
  }
</style>
<style type="text/css">
  .QIHOO__INTERACTIVE_PLUGIN1545061743283-gameBg {
    background-image: url(https://p2.ssl.qhimg.com/t014e3f204a1c16d340.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .QIHOO__INTERACTIVE_PLUGIN1545061743283-thumbnail{
    display: block;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background: url(https://p3.ssl.qhimg.com/t01539d86c446cfd22b.png) no-repeat center;
    background-size: 100% 100%;
    -webkit-animation: tada 5s  linear infinite backwards;
    -moz-animation: tada 5s linear  infinite backwards;
    animation: tada 5s linear  infinite backwards;
  }
  .QIHOO__INTERACTIVE_PLUGIN1545061743283-close{
    display: inline-block;
    position: absolute;
    cursor: pointer;
    width: 35px;
    height: 35px;
    background: url(https://p4.ssl.qhimg.com/t01e71b72de0ab2b182.png) no-repeat center;
    /*https://p4.ssl.qhimg.com/t016e421daa56a19ee6.png*/
    background-size: 100% 100%;
    bottom: 100px;
    right: 42px;
  }
  @-webkit-keyframes tada {
    5% {
      -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
    }
    6%,
    8%,
    10%,
    12% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
    }

    7%,
    9%,
    11% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
    }

    13% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes tada {
    5% {
      -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
    }
    6%,
    8%,
    10%,
    12% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
    }

    7%,
    9%,
    11% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
    }

    13% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

  }
  .QIHOO__INTERACTIVE_PLUGIN1545061743283-singleDay{
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://p4.ssl.qhimg.com/t015a98ef73567e0eae.png) no-repeat bottom right;
    background-size: 100%;
  }

</style>
